{% extends 'base/base.html' %}
{% load static %}
{% block css %}
<style>
    .media img{
        width: 50px;
    }
</style>
{% endblock %}

{% block title %}
<title>book</title>
{% endblock %}

<div class="container">
    {% block body %}
    {% for b in page.object_list %}
    <div class="media">
        <div class="media-left media-middle">
            <img class="media-object" src="{% static 'img/logo.svg' %}" alt="...">
        </div>
        <div class="media-body">
            <h4 class="media-heading">{{ b.title }}</h4>
            <p>{{ b.describe }}</p>
        </div>
    </div>
    {% endfor %}

    <nav aria-label="Page navigation">
        <ul class="pagination">
            {% if page.has_previous %}
            <li>
                <a href="?page={{ page.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            {% endif %}

            {% for page_num in page.paginator.get_elided_page_range %}
            <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
            {% endfor %}
            {% if page.has_next %}
            <li>
                <a href="?page={{ page.next_page_number }}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endblock %}
</div>


